{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>豆瓣Top250可视化大屏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#722ED1',
                        accent: '#FF7D00',
                        dark: '#080B30',
                        light: '#F0F2F5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .glass {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
            }
            .btn-shadow {
                box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
            }
            .btn-gradient {
                background: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);
            }
            .chart-container {
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.03);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(4px);
                border: 1px solid rgba(255, 255, 255, 0.05);
            }
            .stat-card {
                border-radius: 10px;
                background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
                box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
                transition: all 0.3s ease;
            }
            .stat-card:hover {
                transform: translateY(-5px);
                box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3);
            }
        }
    </style>
</head>
<body class="bg-dark font-inter text-light overflow-hidden">
    <div>
        <div id="logo" class="absolute top-0 left-0 w-[25%] h-[10%] flex items-center">
            <a href="{% url 'app:index' %}" class="ml-4 btn-gradient text-white px-6 py-3 rounded-lg font-bold text-lg shadow-lg btn-hover flex items-center">
               首页
            </a>
            
            {% if user %}
            <a href="{% url 'app:logout' %}" class="ml-4 bg-red-600 hover:bg-red-700 text-white px-4 py-3 rounded-lg font-medium transition-all duration-300 shadow-lg btn-hover flex items-center">
               退出
            </a>
            {% endif %}
        </div>

        <div id="title" class="absolute top-0 left-[25%] w-[50%] h-[10%] flex items-center justify-center text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white text-shadow-lg">
            豆瓣Top250可视化系统
        </div>

        <div id="time" class="absolute top-0 right-0 w-[25%] h-[10%] flex items-center justify-end pr-8 text-xl font-semibold">
            <div id="time-display" class="glass rounded-lg px-6 py-2"></div>
        </div>

        <!-- 左侧区域 -->
        <div id="left1">
            <div id="yearLine" class="w-full h-full"></div>
        </div>

        <div id="left2" class="absolute top-[55%] left-0 w-[25%] h-[45%] p-4 chart-container">
            <div id="typePie" class="w-full h-full"></div>
        </div>

         <div id="center1"> <!-- 中间第一个区域，包含统计数据 -->
        <div class="center1-num"><h1>250</h1></div> <!-- 电影总数 -->
        <div class="center1-num"><h1>8.9</h1></div> <!-- 平均评分 -->
        <div class="center1-num"><h1>30</h1></div> <!-- 国家/地区数 -->
        <div class="center1-num"><h1>150</h1></div> <!-- 导演数量 -->
        <div class="center1-txt"><h1>电影总数</h1></div> <!-- 电影总数说明文字 -->
        <div class="center1-txt"><h1>平均评分</h1></div> <!-- 平均评分说明文字 -->
        <div class="center1-txt"><h1>国家/地区数</h1></div> <!-- 国家/地区数说明文字 -->
        <div class="center1-txt"><h1>导演数量</h1></div> <!-- 导演数量说明文字 -->
    </div>
        <div id="center2" class="absolute top-[25%] left-[25%] w-[50%] h-[50%] p-4 chart-container">
            <div id="worldmap" class="w-full h-full"></div>
        </div>

        <div id="center3" class="absolute top-[75%] left-[25%] w-[50%] h-[25%] p-4 chart-container">
            <div class="film-reel-container w-full h-full flex items-center">
                <div class="film-reel w-full flex overflow-x-auto space-x-4 scrollbar-hide pb-2">
                </div>
            </div>
        </div>

        <!-- 右侧区域 -->
        <div id="right1" class="absolute top-[10%] left-[75%] w-[25%] h-[45%] p-4 chart-container">
            <div id="ratingBar" class="w-full h-full"></div>
        </div>

        <div id="right2" class="absolute top-[55%] left-[75%] w-[25%] h-[45%] p-4 chart-container">
            <div id="wordCloud" class="w-full h-full"></div>
        </div>
    </div>

    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/echarts-wordcloud.min.js' %}"></script>
    <script src="{% static 'js/world.js' %}"></script>
    <script src="{% static 'js/yearLine.js' %}"></script>
    <script src="{% static 'js/typePie.js' %}"></script>
    <script src="{% static 'js/worldmap.js' %}"></script>
    <script src="{% static 'js/ratingBar.js' %}"></script>
    <script src="{% static 'js/wordCloud.js' %}"></script>
    <script src="{% static 'js/filmReel.js' %}"></script>
    <script src="{% static 'js/stats.js' %}"></script>
    <script src="{% static 'js/time.js' %}"></script>

    <script>
        // 初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 时间显示
            const updateTime = () => {
                const now = new Date();
                const timeStr = now.toLocaleTimeString();
                const dateStr = now.toLocaleDateString();
                document.getElementById('time-display').textContent = `${dateStr} ${timeStr}`;
            };
            updateTime();
            setInterval(updateTime, 1000);
        });
    </script>
</body>
</html>